<template>
	<uiwu-popup-model 
		v-model="showModel" 
		v-if="showModel" 
		:showTitle="false" 
		iconSrc="/static/myzhongjiang.png"
		@confirm="continueGame"
		@cancel="closePopup(dataInfo)"
	>
		<template v-slot:content>
			<view class="tips">{{uiwu.lang('差点就中了！')}}</view>
		</template>
		<template v-slot:close>
			{{uiwu.lang('离开')}}
		</template>
		<template v-slot:confirm>
			{{uiwu.lang('继续')}}{{timenum}}s
		</template>
	</uiwu-popup-model>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { grabtakeRest } from "@/api/api";
	import { uiwu } from '@/config/config';
	const showModel = ref<boolean>(true)
	const emits = defineEmits(['update:modelValue', 'closegrme', 'continue'])
	const timenum = ref<number>(10)
	
	defineProps({
		dataInfo: {
			default: {},
			type: Object
		}
	})
	let t = setInterval(() => {
		timenum.value--;
		if (timenum.value == 0) {
			clearInterval(t)
			emits('closegrme')
			emits('update:modelValue')
		}
	}, 1000)
	const closePopup = async ({ device_info }) => {
		const result = await grabtakeRest({
			device_id: device_info.id
		})
		if (!result) return
		clearInterval(t)
		emits('closegrme')
		emits('update:modelValue')
	}
	const continueGame = () => {
		clearInterval(t)
		emits('continue')
		emits('update:modelValue')
	}
</script>

<style lang="scss" scoped>
	.uiwu-popup {
		width: 100%;
		height: 100vh;
		justify-content: center;
		align-items: center;
	}

	.uiwu-box {
		width: 544rpx;
		height: 475rpx;
		background: url('../../static/goodstips.png') no-repeat 0 0;
		background-size: 100% 100%;

		image {
			width: 130rpx;
			display: block;
			margin: 135rpx auto 30rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #231815;
			text-align: center;
		}

		.tips {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			margin-top: 10rpx;
			text-align: center;
			opacity: 0;
		}

		.btn {
			position: relative;
			width: 204rpx;
			height: 58rpx;
			margin: 48rpx auto 0;

			text {
				width: 204rpx;
				height: 58rpx;
				border: 3rpx solid #231815;
				border-radius: 29rpx;
				position: absolute;
				left: -2rpx;
				top: -4.5rpx;
				z-index: 9;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;

				&:nth-child(1) {
					background-color: #EF821E;
				}

				&:nth-child(2) {
					background-color: #FAC500;
					z-index: 8;
					left: 2rpx;
					top: 4.5rpx;
				}
			}

			&:nth-child(1) {
				text {
					color: #231815;

					&:nth-child(1) {
						background-color: #F1F1F1;
					}

					&:nth-child(2) {
						background-color: #FFFFFF;
					}
				}
			}
		}
	}
</style>